import "./BookAddForm.scss";
import React from "react";
import {Form, Input, DatePicker, Select, AutoComplete} from "antd";
import { ReactComponent } from "../../class/ReactComponent";
import { AvatarInput } from "../AvatarInput/AvatarInput";
import { FormComponentProps } from "antd/lib/form";
import {TableBookList} from "../../../common/class/TableBookList";
import moment from "moment";
import {updateFrequencyMap} from "../../var/constant";
import {typeList} from "../../../common/var/updateType";

export namespace BookAddForm {
    export type ErrorStatus = "" | "error" | "success" | "warning";
    export interface Props extends ReactComponent.Props, FormComponentProps {
        formData?: Partial<TableBookList.Data>;
    }
    export interface State extends ReactComponent.State {
        avatarURL: string;
        updateDate: string;
    }
}

export class BookAddForm extends ReactComponent<BookAddForm.Props, BookAddForm.State> {
    public readonly state = {
        avatarURL: "",
        updateDate: "",
    };
    public render() {
        return (
            <Form className={this.getClsName("book-add-form-component")}>
                <Form.Item label="书名">{this.getBookNameInput()}</Form.Item>
                <Form.Item label="作者">{this.getAuthorInput()}</Form.Item>
                <Form.Item label="封面">{this.getCoverUpload()}</Form.Item>
                <Form.Item label="上次更新时间">{this.getUpdateInput()}</Form.Item>
                <Form.Item label="更新频率">{this.getUpdateFrequencySelect()}</Form.Item>
                <Form.Item label="更新方法">{this.getUpdateMethodInput()}</Form.Item>
                <Form.Item label="更新网址">{this.getUpdateURLInput()}</Form.Item>
            </Form>
        );
    }

    protected getBookNameInput() {
        const initialValue = (this.props.formData && this.props.formData.name) || "";
        return this.props.form.getFieldDecorator("name", {
            rules: [
                {
                    required: true,
                    message: "请输入书名",
                },
            ],
            trigger: "onInput",
            initialValue,
        })(<Input placeholder="请输入书名" />);
    }
    protected getAuthorInput() {
        const initAuthor = (this.props.formData && this.props.formData.author) || "";
        return this.props.form.getFieldDecorator("author", {
            rules: [
                {
                    required: true,
                    message: "请输入作者姓名",
                },
            ],
            trigger: "onInput",
            initialValue: initAuthor,
        })(<Input placeholder="请输入作者姓名" />);
    }
    protected getUpdateInput() {
        const dateFormatType = "YYYY-MM-DD HH:mm:ss";
        let initialValue = moment().startOf("day");
        if (this.props.formData && this.props.formData.last_update_time) {
            initialValue = moment(this.props.formData.last_update_time);
        }
        return this.props.form.getFieldDecorator("last_update_time", {
            initialValue,
        })(<DatePicker
            showTime
            format={dateFormatType}
        />);
    }
    protected getUpdateMethodInput() {
        const initialValue = (this.props.formData && this.props.formData.update_method) || "";
        return this.props.form.getFieldDecorator("update_method", {
            initialValue,
        })(<AutoComplete>{this.getUpdateMethodOptionList()}</AutoComplete>);
    }
    protected getUpdateMethodOptionList() {
        return typeList.map((type) => {
            return (<AutoComplete.Option key={type}>{type}</AutoComplete.Option>);
        });
    }
    protected getUpdateURLInput() {
        let initialValue = "";
        if (this.props.formData && this.props.formData.update_refer_url) {
            initialValue = this.props.formData.update_refer_url;
        }
        return this.props.form.getFieldDecorator("update_refer_url", {
            initialValue,
        })(<Input placeholder="请输入更新网址" />);
    }
    protected getUpdateFrequencySelect() {
        const that = this;
        return this.props.form.getFieldDecorator("update_frequency", {
            initialValue: "week",
        })(<Select>{that.getFrequencyOptions()}</Select>);
    }
    protected getFrequencyOptions() {
        const optionList = [];
        for (const val in updateFrequencyMap) {
            if (updateFrequencyMap.hasOwnProperty(val)) {
                const elm = (<Select.Option
                    value={val}
                    title={(updateFrequencyMap as any)[val]}
                    key={"frequency-" + val + "-" + Date.now()}
                >{(updateFrequencyMap as any)[val]}</Select.Option>);
                optionList.push(elm);
            }
        }
        return optionList;
    }
    protected getCoverUpload() {
        const that = this;
        const formData = this.props.formData;
        let initialValue = "";
        if (formData && formData.cover) {
            initialValue = formData.cover;
        }
        return this.props.form.getFieldDecorator("cover", {
            initialValue,
            rules: [
                {
                    required: true,
                    message: "请选择本地图片或者填写图片地址",
                },
            ],
        })(<AvatarInput
            onChange={this.onCoverChange.bind(this)}
        />);
    }
    protected onCoverChange(url: string) {
        this.setState({
            avatarURL: url,
        });
    }
}
